<template>
  <div>
    <el-button type="primary" round @click="add">
      <slot name="btn-text"></slot>
    </el-button>
    <div class="tag-list">
      <el-tag
        v-for="tag in actioners"
        class="tag-item"
        :key="tag.id"
        closable
        :disable-transitions="false"
        @close="remove(tag)"
      >
        {{ tag.name }}
      </el-tag>
    </div>
    <el-dialog title="选择发起人" v-model="dialogVisible" width="800" @close="close">
      <UserDeptRoleSelector ref="selectorRef" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { Actioner } from '../types'
const props = defineProps({
  actioners: {
    type: Array as () => Actioner[],
    default: () => []
  },
  type: {
    type: Number,
    default: 1
  }
})
const emits = defineEmits(['update:actioners'])
const dialogVisible = ref<boolean>(false)
const selectorRef = ref<any>(null)
const add = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}
const remove = (tag: Actioner) => {
  const arr = props.actioners.filter((item) => item.id !== tag.id)
  emits('update:actioners', arr)
}
onMounted(() => {
  const source = {
    userUrl: '//test.ovud.com/blm/adm/adm/org/user/list',
    rolesUrl: '//test.ovud.com/blm/adm/adm/org/role/list',
    deptsUrl: '//test.ovud.com/blm/adm/adm/org/list'
  }
  selectorRef.value?.init(source, props.type, props.actioners)
})
</script>
